<template>

  <div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="70%" :close-on-click-modal="false"
      :before-close="handleClose">
      <div class="form">
        <el-divider>基本信息</el-divider>
        <div class="dialog_left children">
          <el-descriptions direction="vertical" :column="4" border>
            <el-descriptions-item label="申请单号" :labelStyle="labelStyle">{{ form.outsourceNum || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="设备编号">{{
            form.repairVo && form.repairVo.repairEquipmentAccountVo.eaPartInfoVo.equipmentNum || '-'
            }}
            </el-descriptions-item>
            <el-descriptions-item label="设备名称">{{
            form.repairVo && form.repairVo.repairEquipmentAccountVo.eaPartInfoVo.equipmentName || '-'
            }}
            </el-descriptions-item>
            <el-descriptions-item label="规格型号">{{
            form.repairVo && form.repairVo.repairEquipmentAccountVo.eaPartInfoVo.model || '-'
            }}</el-descriptions-item>
            <el-descriptions-item label="供应商" :labelStyle="labelStyle">{{
            form.repairVo && form.repairVo.repairEquipmentAccountVo.eaPartInfoVo.supplierName || '-'
            }}
            </el-descriptions-item>
            <el-descriptions-item label="设备状态">
              <div
                :style="'color:' + ['#67C23A', '#E6A23C', '#409EFF', '#F56C6C'][form.repairVo && form.repairVo.repairEquipmentAccountVo.status]">
                <i
                  :class="['el-icon-circle-check', 'el-icon-warning-outline', 'el-icon-remove-outline', 'el-icon-circle-close'][form.repairVo && form.repairVo.repairEquipmentAccountVo.status]" />
                <span>
                  {{ ['正常', '带病运行', '检修中', '故障'][form.repairVo && form.repairVo.repairEquipmentAccountVo.status] }}
                </span>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="所属部门">{{
            form.repairVo && form.repairVo.repairEquipmentAccountVo.eaPartInfoVo.deptName || '-'
            }}</el-descriptions-item>
            <el-descriptions-item label="位置">{{
            form.repairVo && form.repairVo.repairEquipmentAccountVo.eaPartInfoVo.placeName || '-'
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <!-- <el-divider>委外信息</el-divider>
        <div class="dialog_left children">
          <el-descriptions :column="4" border>
            <el-descriptions-item label="委外服务商" :span="4" :labelStyle="labelStyle"> {{ form.supplierName || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="联系人" :span="4" :labelStyle="labelStyle">{{ form.liaison || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="联系电话" :span="4" :labelStyle="labelStyle">{{ form.phone || '-' }}
            </el-descriptions-item>
          </el-descriptions>
        </div> -->

        <div v-if="form.selectMode == 1">
          <el-divider>委外服务商</el-divider>
          <div class="dialog_left children">
            <div class="suppliertitle" style="color: rgb(121, 120, 120);">
              <div>服务商选定</div>
              <div style="margin-left: 20px;">{{['指定服务商','比选服务商'][form.selectMode]||'-'}}</div>
            </div>
          </div>
          <el-table :data="form.supplierCompares" max-height="550px" style="width: 100%">
            <el-table-column label="序号" width="100">
              <template slot-scope="scope">
                <div> {{ scope.$index + 1 }} </div>
              </template>
            </el-table-column>
            <el-table-column prop="supplierName" label="供应商名称" min-width="160" />
            <el-table-column prop="address" label="地址" min-width="160" />
            <el-table-column prop="contact" label="联系人" min-width="160" />
            <el-table-column prop="telephone" label="联系电话" show-overflow-tooltip min-width="160">
              <template slot-scope="{row}">
                <div> {{ row.telephone || '-' }} </div>
              </template>
            </el-table-column>
            <el-table-column prop="website" label="官网" show-overflow-tooltip min-width="160">
              <template slot-scope="{row}">
                <div> {{ row.website || '-' }} </div>
              </template>
            </el-table-column>
            <el-table-column prop="file" label="附件" min-width="160">
              <template slot-scope="scope">
                <el-link :disabled="!(scope.row.file)" icon="el-icon-document" type="primary" :href=" scope.row.file"
                  target="_blank">
                  附件资料</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="website" label="供应商特点描述" show-overflow-tooltip min-width="160">
              <template slot-scope="{row}">
                <div> {{ row.description || '-' }} </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="220" fixed="right">
              <template slot-scope="scope">
                <el-button size="small" type="primary" icon="el-icon-view" @click="handleSelectImage(scope.row.image)">
                  图片
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-divider>比选结果</el-divider>
          <div class="dialog_left children">
            <div style="margin:0 0 15px 0;color: red;font-size: 12px;">注：审核通过后，新服务商将自动加入供应商管理模块中
            </div>
            <div class="suppliertitle">
              <div>选定服务商：</div>
              <div style="margin-left: 10px;">{{form.selectSupplierName||'-'}}</div>
            </div>
            <div class="suppliertitle">
              <div style="margin-left: 15px;">选定原因：
              </div>
              <div style="margin-left: 10px;">{{form.selectSupplierReason ||'-'}}</div>
            </div>
          </div>
        </div>


        <el-divider>故障信息</el-divider>
        <div class="dialog_left children">
          <el-descriptions :column="4" border>
            <el-descriptions-item label="故障等级" :span="4" :labelStyle="labelStyle">
              <div :style="'color:' + ['#F56C6C', '#E6A23C', '#409EFF'][form.repairVo && form.repairVo.faultLevel]">
                <!-- <i :class="['el-icon-circle-close', 'el-icon-success', 'el-icon-remove'][row.faultLevel]" /> -->
                <span>
                  {{ ['紧急 ', '严重 ', '一般'][form.repairVo && form.repairVo.faultLevel] }}
                </span>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="故障描述" :span="4" :labelStyle="labelStyle">
              {{ form.repairVo && form.repairVo.faultDescribe || '-' }}</el-descriptions-item>
            <el-descriptions-item label="故障图片" :span="4" :labelStyle="labelStyle">
              <div v-if="form.repairVo && form.repairVo.repairImages.length">
                <Image-preview v-for="(item, i) in repairImages(form.repairVo && form.repairVo.repairImages, 0)"
                  style="margin-left:20px" :key="i" :src="item.image || ''" width="100px" height='100px'>
                </Image-preview>
              </div>
              <div v-else style="color:#ccc">暂无图片信息</div>
            </el-descriptions-item>
            <el-descriptions-item label="故障视频" :span="4" :labelStyle="labelStyle">
              <video v-if="form.repairVo && form.repairVo.faultVideo" :src="form.repairVo.faultVideo" width="390"
                height="200" style="background-color: black" controls="controls">
                您的浏览器不支持视频播放
              </video>
              <div v-else style="color: #ccc;">暂无视频信息</div>
            </el-descriptions-item>
          </el-descriptions>
          <el-divider>审核信息</el-divider>
          <el-input type="textarea" placeholder="请输入审核意见" rows="4" v-model.trim="ruleForm.textarea" maxlength="50"
            show-word-limit>
          </el-input>
        </div>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleConfirm(2)">通过</el-button>
          <el-button type="danger" @click="handleConfirm(3)">驳回</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 图片显示组件 -->
    <template v-if="ImageOpen">
      <Dialog-image :src="imageSrc" />
    </template>
  </div>
</template>

<script>
/** 远程添加，修改，获取单个详性接口，获取selector下拉列表的接口，以及时间转换工具函数等 ------------------------------------------------- */
import { listDetail, updateCreateRight } from '@/api/maintenance/management/Outsourcing.js'
/** ------------------------------------------------------------------------------------------------------------------------------- */

/** 表单参数 ------------------------------------------------------------------------------------------------------------------------ */
const ruleForm = {
  textarea: '',// 审核信息提交数据
}
/** ---------------------------------------------------------------------------------------------------------------------------------- */

export default {
  name: 'Form',
  data () {
    return {
      dialogVisible: false,
      ruleForm: Object.assign({}, ruleForm),
      dialogTitle: '',
      form: {},//审核展示数据
      labelStyle: { 'width': '405.5px' },
      imageSrc: undefined,//图片预览参数
      ImageOpen: false,
    }
  },
  methods: {
    // 打开表单对话框
    openDialog (ids) {
      if (ids) {
        listDetail(ids.outsourceId).then(({ data: res }) => {
          this.dialogTitle = '审核'
          this.$set(this.ruleForm, 'outsourceId', ids.outsourceId)
          this.$set(this.ruleForm, 'auditId', ids.auditId)
          this.form = res
          this.dialogVisible = true
        })
      }
    },
    repairers (arr, val) {
      if (arr == undefined || arr.length == 0) {
        return ''
      }
      let data = []
      if (val) {
        data = arr.filter(item => {
          return item.type != 0
        })
      } else {
        data = arr.filter(item => {
          return item.type == 0
        })
      }
      return data.map(item => item.repairerName).join(',')
    },
    repairImages (arr, val) {
      if (arr == undefined || arr.length == 0) {
        return arr
      }
      let data = []
      if (val) {
        data = arr.filter(item => {
          return item.type != 0
        })
      } else {
        data = arr.filter(item => {
          return item.type == 0
        })
      }
      return data
    },
    // 提交表单
    submitForm (id) {
      updateCreateRight(this.ruleForm).then(() => {
        this.resetForm('ruleForm')
        this.dialogVisible = false
        this.$emit('submit_success')
        this.$message({
          message: id == 2 ? '审核已通过' : '审核已驳回',
          type: id == 2 ? 'success' : 'error'
        })
      })
    },
    /** ---------------------------------------------------------------------------------------------------------------------------------------- */
    // 关闭窗口，重置表单
    handleClose () {
      this.ruleForm = Object.assign({}, ruleForm)
      this.dialogVisible = false
    },
    handleConfirm (id) {
      if (id == 3 && this.ruleForm.textarea == '') {
        this.$message({
          message: '驳回需要填写审核意见！',
          type: 'error'
        });
        return
      };
      this.$set(this.ruleForm, 'status', id);
      this.submitForm(id);
    },
    resetForm () {
      this.handleClose()
    },
    handleSelectImage (src) {
      this.imageSrc = src
      this.ImageOpen = true
    },
  }
}
</script>
<style lang="scss" scoped>
.form {
  padding: 0 80px;

  .inventory {
    display: flex;
  }

  &_textarea {
    width: 60%;
    margin-left: 20%;
  }
}

::v-deep .el-input-number__decrease {
  display: none;
}

::v-deep .el-input-number__increase {
  display: none;
}

::v-deep .el-select {
  width: 100%;
}

::v-deep .el-input-number {
  width: 100%;
}

.rule_form {
  display: flex;

  &_left {
    flex: 1;
    margin-right: 20px;
  }

  &_right {
    flex: 1
  }
}

.dialog-footer {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.suppliertitle {
  display: flex;
  font-size: 14px;
  color: #000;
  margin-top: 10px;
  margin-bottom: 10px;

}
</style>
